<template>
    <el-container>
        <el-header>
            <div><img src="../../pictures/logo.png" width="68px" height="60px"> <span>科记：记录精彩校园生活</span></div>
            <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#99ecff"
            text-color="black"
            active-text-color="#f59456">
                <el-menu-item class="grid-content" index="1">
                    <el-link href="#/home" target="_self" underline="false">科记主页</el-link>
                </el-menu-item>
                <el-submenu class="grid-content" index="3">
                    <template slot="title">生活助手</template>
                    <el-menu-item index="3-1">
                        <router-link :to="{ name: 'blog', params: { id: 1 } }">校园博客</router-link>
                    </el-menu-item>
                    <el-menu-item index="3-2">
                        <router-link :to="{ name: 'blog', params: { id: 2 } }">生活分享</router-link>
                    </el-menu-item>
                    <el-menu-item index="3-3"><a href="#/question" target="_self">校园问答</a></el-menu-item>
                </el-submenu>
                <el-submenu class="grid-content" index="4">
                    <template slot="title">班级事务</template>
                    <el-menu-item index="4-1">
                        <router-link :to="{ name: 'notice'}">班级通知</router-link>
                    </el-menu-item>
                    <el-menu-item index="4-2"><a href="#/account" target="_self">班级账目</a></el-menu-item>
                </el-submenu>
                <el-menu-item class="grid-content" index="5">
                    <el-link href="#/information" target="_self" underline="false">个人信息</el-link>
                </el-menu-item>
                <el-menu-item class="grid-content">
                    <div display: center>
                        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                            <el-select v-model="select" slot="prepend" placeholder="请选择">
                            <el-option label="校园博客" value="1"></el-option>
                            <el-option label="生活助手" value="2"></el-option>
                            <el-option label="校园问答" value="3"></el-option>
                            <el-option label="班级通知" value="4"></el-option>
                            </el-select>
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-menu-item>
                <el-menu-item>
                    <div><el-col :span="12">
                            <div class="demo-basic--circle">
                                <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
                            </div>
                        </el-col> 
                    </div>
                </el-menu-item>
            </el-menu>
            <div class="line"></div>
        </el-header>

        <el-main>
            <el-card v-if="currentBlog">
                <h2>{{ currentBlog.title }}</h2>
                <p>发布者: {{ currentBlog.author }}</p>
                <p>{{ currentBlog.content }}</p>
                <el-button @click="goback">返回</el-button>
            </el-card>

            <div v-else>
                <div class="blog-container">
                    <el-row>
                        <el-col :span="6" v-for="(blog, index) in paginatedBlogs" :key="index">
                            <el-card :body-style="{ padding: '0px' }">
                                <h3>{{ blog.title }}</h3>
                                <img :src="blog.imageUrl" class="image">
                                <p>发布者: {{ blog.author }}</p>
                                <p>发布时间: {{ blog.writingDate }}</p>
                                <p>{{ blog.summary }}</p>
                                <div class="bottom clearfix">
                                    <el-button type="text" class="button" @click="showBlogDetail(blog.id)">详情</el-button>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    
                    <!-- 分页放在 el-row 的外部 -->
                    <div class="pagination-container">
                        <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            :total="totalBlogs"
                            layout="total, prev, pager, next, jumper">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import { getPapersinfo,  getUsersinfo, getBlogDetail } from '@/api/blog';

// import { get } from 'core-js/core/dict';

export default {
    data() {
        return {
            activeIndex: '1',
            activeIndex2: '1',//与字体颜色有关的值
            input: '',//搜索栏的输入
            select: '',//搜索栏的选择
            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",//头像的访问路径
            currentPage: 1,
            pageSize: 8,
            value: '',
            blogs: [],
            currentBlog: null, // 用于存储当前选中的博客
        };
    },
    computed: {
        totalBlogs() {
            return this.blogs.length;
        },
        paginatedBlogs() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.blogs.slice(start, end);
        },
    },
    methods: {
        id() {
            this.value = this.$route.params.id; // 从 $route.params 获取文章类别
            return this.value;
        },

        handleCurrentChange(newPage) {
            this.currentPage = newPage;
        },

        showBlogDetail(blogId) {// 根据博客ID请求博客详情
            let url = '';
            if (this.value == '1') {
                url = '/blogs/single'
            } else {
                url = '/shares/single'
            } 
            getBlogDetail(url, blogId) // 发送请求获取博客详情
                .then(response => {
                    this.currentBlog = response.data.data; // 将响应数据赋值给 currentBlog
                })
                .catch(error => {
                    console.error('获取博客详情时出错:', error);
                });
        },

        goBack() {
            this.currentBlog = null; // 返回到博客列表
        },

        fetchPaperInfo() {
            let url = '';
            if (this.value == '1') {
                url = '/blogs/all'
            } else if (this.value == '2') {
                url = '/shares/all'
            }
            getPapersinfo(url) // 获取文章列表
                .then(response => {
                    this.blogs = response.data.data; // 将响应数据赋给 blogs
                })
                .catch(error => {
                    // 处理错误
                    console.error(error);
                });
        },

        fetchUserInfo() {
            getUsersinfo() // 获取用户信息
               .then(response => {
                    this.squareUrl = response.data.imageUrl; // 将头像路径赋给 squareUrl
                })
        }
    },
    created() {
        this.id();
        this.fetchUserInfo();
        this.fetchPaperInfo();
    }
}
</script>

<style>
    .el-header{
        background: #99ecff;
        display: flex;
        padding-left: 0;
        justify-content: space-between;
        color: black;
        font-size: 20px;
        > div{
            display: flex;
            align-items: center;
            span{
                margin-left: 15px;
            }
        }
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .image {
        width: 70%;
        display: block;
    }

    .blog-container {
        display: flex;
        flex-direction: column; /* 确保内容垂直排列 */
    }
    
    .pagination-container {
        margin-top: 20px; /* 添加一点间距，确保分页和内容之间的可读性 */
    }
</style>